<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>
        <title>Listado de voluntarios</title>
        <link href="recursos/general.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            function crearMensaje(xhr, status, args){
                if(args.voluntarioOK){
                    msgModif.show();
                    dialogo.hide();
                }else if(args.noModificado){
                    msgNoModif.show();
                    dialogo.hide();
                }else if(args.borrarOK){
                    msgBorrado.show();
                }else if(args.noBorrado){
                    msgNoBorrado.show();
                }else if(args.desactivadoOK){
                    msgDesactivado.show(); 
                }else if(args.noDesactivado){
                    msgNoDesactivado.show();
                }else if(args.faltanDatos){
                    faltanDatos.show();
                }else if(args.contultar){
                    dialogo.hide();
                }
            }
        </script>
    </h:head>
    <h:body>
        <h:form id="form">
            <!--Nos mostrará el título de la página -->
            <h:outputText value="#{listado_Voluntario.titulo}" styleClass="textoTitulo"/>
            
            <!--Panel que muestra todo los voluntario existentes -->
            <p:dataTable id="panel" value="#{listado_Voluntario.voluntarios}" var="voluntar" paginator="true"  rows="30" 
                         paginatorPosition="bottom" emptyMessage="No hay voluntarios activos" style="margin-top: 10px;">
                <p:column filterBy="#{voluntar.dni}" filterMatchMode="contains" style="width: 10%;">
                    <f:facet name="header">
                        <h:outputText value="DNI"/>
                    </f:facet>
                    <h:outputText value="#{voluntar.dni}" style="width: 15%;"/> 
                </p:column>
                <p:column filterBy="#{voluntar.nombre}" filterMatchMode="contains">
                    <f:facet name="header">
                        <h:outputText value="Nombre"/>
                    </f:facet>
                    <h:outputText value="#{voluntar.nombre}" /> 
                </p:column>
                <p:column style="width: 25%;">
                    <f:facet name="header">
                        <h:outputText value="Apellidos"/>
                    </f:facet>
                    <h:outputText value="#{voluntar.apellidos}"/> 
                </p:column>
                <p:column style="width: 10%;">
                    <f:facet name="header">
                        <h:outputText value="Fecha de nacimiento"/>
                    </f:facet>
                    <h:outputText value="#{voluntar.fechaNacimiento}">
                        <f:convertDateTime pattern="dd/MM/yyyy"/>
                    </h:outputText>
                </p:column>
                <p:column style="width: 15%;">
                    <f:facet name="header">
                        <h:outputText value="Teléfono"/>
                    </f:facet>
                    <h:outputText value="#{voluntar.telefono}"/>
                </p:column>
                <p:column style="width: 15%;">
                    <f:facet name="header">
                        <h:outputText value="Opciones"/>
                    </f:facet>
                    <p:commandButton image="ui-icon ui-icon-search" oncomplete="dialogo.show()" action="#{listado_Voluntario.consultar}" 
                                     update="form:display,dialogo" title="Consultar">
                        <f:setPropertyActionListener value="#{voluntar}" target="#{listado_Voluntario.voluntario}"/>
                    </p:commandButton>
                    <p:commandButton image="ui-icon ui-icon-pencil" oncomplete="dialogo.show()" action="#{listado_Voluntario.editar}" 
                                     update="form:display,dialogo" title="Editar">
                        <f:setPropertyActionListener value="#{voluntar}" target="#{listado_Voluntario.voluntario}"/>
                    </p:commandButton>
                    <p:commandButton oncomplete="cd.show()"  
                                     image="ui-icon ui-icon-closethick" title="Borrar">
                        <f:setPropertyActionListener value="#{voluntar}" target="#{listado_Voluntario.voluntario}"/>
                    </p:commandButton>
                </p:column>                
            </p:dataTable>

            <p:commandButton value="Exportar" styleClass="botonGrande" style="margin-top: 10px;" onclick="exportarDialog.show();"/>
            <p:dialog widgetVar="exportarDialog" header="Exportar datos" styleClass="dialogoNormal" modal="true" resizable="false" width="180">
                <!--Panel que permite exportar el contenido de la tabla a pdf o xls -->
                <h:panelGrid columns="2">
                    <h:commandLink  onclick="exportarDialog.hide();">
                        <p:graphicImage value="/imagenes/pdf.jpg" height="80px" width="60px"/>  
                        <p:dataExporter type="pdf" target="panel" fileName="Listado_Voluntario" excludeColumns="5"/>
                    </h:commandLink>
                    <h:commandLink>
                        <p:graphicImage value="/imagenes/xls.jpg" height="90px" width="90px"/>
                        <p:dataExporter type="xls" target="panel" fileName="Listado_Voluntario" excludeColumns="5"/>
                    </h:commandLink>
                </h:panelGrid>
            </p:dialog>

            <!--Dialogo que muestra los datos de un voluntario seleccionado -->
            <p:dialog id="dialogo" width="800" widgetVar="dialogo" header="Datos del voluntario" resizable="false"  
                      modal="true" closable="false" styleClass="dialogoNormal">
                <p:panel id="display">
                    <table>
                        <tr>
                            <td>
                                <h:outputText value="DNI: *" styleClass="texto"/>  
                            </td>
                            <td>
                                <h:outputText id="Dni" value="#{listado_Voluntario.voluntario.dni}" styleClass="texto"/>  
                            </td>
                            <td>
                                <h:outputText value="Nombre: *" styleClass="texto"/> 
                            </td>
                            <td>
                                <p:inputText id="Nombre" value="#{listado_Voluntario.voluntario.nombre}" readonly="#{!listado_Voluntario.editar}" 
                                             styleClass="textoI" /> 
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <h:outputText value="Apellidos: *" styleClass="texto"/>  
                            </td>
                            <td>
                                <p:inputText id="Apellidos" value="#{listado_Voluntario.voluntario.apellidos}" readonly="#{!listado_Voluntario.editar}"
                                             styleClass="textoI"/> 
                            </td>
                            <td>
                                <h:outputText value="Fecha de Nacimiento:" styleClass="texto"/> 
                            </td>
                            <td>
                                <p:calendar showOn="button" navigator="true" maxdate="new Date()" pattern="dd/MM/yyyy"
                                            value="#{listado_Voluntario.voluntario.fechaNacimiento}" disabled="#{!listado_Voluntario.editar}" size="13"/>  
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <h:outputText value="Domicilio:" styleClass="texto"/>   
                            </td>
                            <td colspan="3">
                                <p:inputText value="#{listado_Voluntario.voluntario.domicilio}" readonly="#{!listado_Voluntario.editar}" 
                                             styleClass="textoI" style="width: 430px !important;"/> 
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <h:outputText value="Telefono:" styleClass="texto"/>   
                            </td>
                            <td>
                                <p:inputText value="#{listado_Voluntario.voluntario.telefono}" readonly="#{!listado_Voluntario.editar}" styleClass="textoI"/> 
                            </td>
                            <td>
                                <h:outputText value="Email:" styleClass="texto"/>  
                            </td>
                            <td>
                                <p:inputText value="#{listado_Voluntario.voluntario.email}" readonly="#{!listado_Voluntario.editar}" styleClass="textoI"/>  
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <h:outputText value="Actividades principales: " styleClass="texto"/>
                            </td>
                            <td colspan="3">
                                <p:inputTextarea value="#{listado_Voluntario.voluntario.actividadesPrincipales}" 
                                                 readonly="#{!listado_Voluntario.editar}" styleClass="textoI" autoResize="false"
                                                 style="width: 430px !important;"/>   
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <h:outputText value="Fecha de Registro:" styleClass="texto"/>    
                            </td>
                            <td>
                                <h:outputText value="#{listado_Voluntario.voluntario.fechaRegistro}" styleClass="texto">
                                    <f:convertDateTime pattern="dd/MM/yyyy"/>
                                </h:outputText> 
                            </td>
                        </tr>
                    </table>           
                </p:panel> 
                <p:commandButton value="Aceptar" action="#{listado_Voluntario.aceptar}" oncomplete="crearMensaje(xhr, status, args)" 
                                 styleClass="botonGrande" style="margin-top: 5px;"/>
            </p:dialog>

            <!--Dialogo de confirmación que indica que el voluntario se ha modificado correctamente-->
            <p:confirmDialog message="El voluntario ha sido modificado correctamente" severity="info" widgetVar="msgModif" modal="true"
                             styleClass="dialogoGrande"/>

            <!--Dialogo de confirmación que indica que el voluntario no se ha modificado -->
            <p:confirmDialog message="El voluntario no ha sido modificado" severity="info" widgetVar="msgNoModif" modal="true"
                             styleClass="dialogoGrande"/>

            <!--Dialogo que indica que faltan datos obligatorios-->
            <p:confirmDialog message="Faltan datos. Compruebe el nombre y apellidos" severity="info" widgetVar="faltanDatos" modal="true"
                             styleClass="dialogoGrande"/>

            <!--Dialogo de confirmación que nos preguntara varias opciones -->
            <p:confirmDialog message="Seleccione la opción deseada:" severity="alert"
                             header="Iniciar borrado" widgetVar="cd" width="400" modal="true" styleClass="dialogoNormal">
                <p:commandButton value="Borrar" action="#{listado_Voluntario.borrar()}" onclick="cd.hide()"  update="panel" styleClass="botonGrande"/>
                <p:commandButton value="Desactivar" action="#{listado_Voluntario.desactivar()}" onclick="cd.hide()" update="panel" styleClass="botonGrande"/>                
            </p:confirmDialog>

            <!--Dialogo de confirmación que indica que el voluntario ha sido borrado correctamente -->
            <p:confirmDialog message="El voluntario ha sido borrado correctamente." severity="info" widgetVar="msgBorrado" modal="true"
                             styleClass="dialogoGrande"/>

            <!--Dialogo de confirmación que indica que el voluntario no ha sido borrado -->
            <p:confirmDialog message="El voluntario no ha sido borrado" severity="info" widgetVar="msgNoBorrado" modal="true"
                             styleClass="dialogoGrande"/>

            <!--Dialogo de confirmación que indica que el voluntario ha sido desactivado correctamente -->
            <p:confirmDialog message="El voluntario ha sido desactivado correctamente" severity="info" widgetVar="msgDesactivado" modal="true"
                             styleClass="dialogoGrande"/>

            <!--Dialogo de confirmación que indica que el voluntario no ha sido desactivado -->
            <p:confirmDialog message="El voluntario no ha sido desactivado" severity="info" widgetVar="msgNoDesactivado" modal="true"
                             styleClass="dialogoGrande"/>          
        </h:form>
    </h:body>
</html>